<template>
  <mu-card>
    <mu-card-title :title="title" :subTitle="date"/>
    <mu-card-text>{{content}}</mu-card-text>
    <mu-content-block>
      <course-feedback-item-picture-displayer
        :imagePathList="imageList"
        @requestDisplayImage="showImage(arguments[0])"/>
    </mu-content-block>
    <div style="text-align: right">
      <mu-icon-menu
        icon="more_vert"
        :anchorOrigin="{vertical: 'bottom',horizontal: 'right'}"
        :targetOrigin="{vertical: 'bottom',horizontal: 'left'}"
        :open="openActions">

        <mu-menu-item title="删除" @click="showConfirmDialog=true"/>
      </mu-icon-menu>
    </div>
    <!--<mu-popup-->
    <!--position="top"-->
    <!--popupClass="displayed-image-wrapper"-->
    <!--:open="showImagePopup"-->
    <!--@close="showImagePopup = false">-->
    <!--<img :src="displayedImage" class="displayed-image">-->
    <!--</mu-popup>-->
    <confirm-dialog
      :message="'确认删除?'"
      :title="'删除反馈'"
      @confirm="deleteFeedbackItem"
      @cancel="showConfirmDialog=false"
      v-if="showConfirmDialog"/>
    <mu-popup position="top" :overlay="false" :open="showPopup" popupClass="basic-topup">
      {{popupMessage}}
    </mu-popup>
  </mu-card>
</template>
<script>
  /**
   * 课堂回馈动态(曾经发过的课堂回馈)组件
   */
  import CourseFeedbackItemPictureDisplayer from './CourseFeedbackItemImageDisplayer.vue'
  import ConfirmDialog from './ConfirmDialog.vue'
  import resources from '../store/resources'
  import store from '../store/store'
  import ImageViewer from './ImageViewer'


  export default {
    components: {
      CourseFeedbackItemPictureDisplayer,
      ConfirmDialog,
      ImageViewer
    },
    data() {
      return {
//        弹窗相关
        displayedImage: null,
        showImagePopup: false,

        showConfirmDialog: false,

//        打开卡片选项(删除等)
        openActions: false,

//        Popup
        showPopup: false,
        popupMessage: ''
      }
    },
    props: {
      title: {
        type: String,
        default: '无标题'
      },
      date: {
        type: String,
        default: '未正确显示日期'
      },
      content: {
        type: String,
        default: '正文内容为空'
      },
      imageList: {
        type: Array,
        default() {
          return []
        }
      },
      id: {
        required: true
      }
    },
    methods: {
      showImage(src) {
        // this.showImagePopup = true
        // this.displayedImage = src
        store.commit('showImagePopup',src)
      },
      test() {
        console.log('test2')
      },
      deleteFeedbackItem() {
        resources.deleteCourseFeedback(this.id)
          .then(
            () => {
              this.showConfirmDialog = false
              this.$nextTick(() => {
                // this._showPopup('删除成功')
                store.commit('showToast','删除成功')
              })
              this.$emit('refresh')
            },
            () => {
              this.showConfirmDialog = false
              this.$nextTick(() => {
                // this._showPopup('删除失败')
                store.commit('showToast','删除失败')
              })
            }
          )
      },
      _showPopup(message) {
        this.showPopup = true
        this.popupMessage = message
        setTimeout(() => {
          this.showPopup = false
        }, 2000)

      },
      _closePopup() {
        this.showPopup = false
      }
    }
  }
</script>
<style scoped>
  .displayed-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .displayed-image-wrapper {
    width: 80%;
    height: 80%;
  }

  .basic-topup {
    width: 50%;
    text-align: center;
    padding: 1em 2em;
  }
</style>
